<template>
    <div>
        <div>
            <el-button type="primary" @click="drawer = true">新增账号</el-button>
        </div>
        <el-table :data="userList" style="width: 100%">
            <el-table-column label="用户ID" prop="objectId" />
            <el-table-column label="用户名" prop="username" />
            <el-table-column label="角色名称" prop="rolename" />
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button size="small" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
                    <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-drawer v-model="drawer" title="新增账号" direction="rtl">
            <el-form :model="form" label-width="120px">
                <el-form-item label="账号">
                    <el-input v-model="account.username" />
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="account.password" />
                </el-form-item>
                <el-form-item label="角色">
                    <el-select v-model="checkRole" class="m-2" placeholder="Select" size="large">
                        <el-option v-for="(item, index) in roleList" :key="item.objectId" :label="item.name"
                            :value="index" />
                    </el-select>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="handleSubmit">提交</el-button>
                    <el-button>重置</el-button>
                </el-form-item>
            </el-form>
        </el-drawer>
    </div>
</template>

<script>
import { userGet, roleGet, userReg } from '../../api/user'
export default {
    data() {
        return {
            userList: [], //用户
            roleList: [],  //角色
            drawer: false,
            account: {
                username: '',
                password: ''
            },
            checkRole: ''
        }
    },
    created() {
        userGet().then(res => { //加载用户
            console.log(res);
            this.userList = res.data.results
        })
        roleGet().then(res => { //加载角色
            this.roleList = res.data.results
        })
    },
    methods: {
        handleSubmit() {
            console.log(this.account, this.checkRole);
            let { name, objectId } = this.roleList[this.checkRole] //获取角色名、角色id
            let userObj = {
                ...this.account,
                'rolename': name,
                'roleid': objectId
            }
            userReg(userObj).then(res => { //更新数据库
                console.log(res);
                userObj.objectId = res.data.objectId //将后端下发的用户id，进行呈现
                this.userList.push(userObj) //跟新本地表格
                this.drawer = false
            })
        }
    },
}
</script>


<style lang="scss" scoped>

</style>